<div class="form-box container" style="padding: 35px 35px 15px;">
  <form nz-form [formGroup]="categoryForm" (ngSubmit)="submitForm()">
    <nz-form-item nzJustify="center">
      <nz-form-label nzSpan=4 nzRequired nzErrorTip="请输入品牌分类名称" >分类名称</nz-form-label>
      <nz-form-control nzSpan=20 nzHasFeedback>
        <input nz-input formControlName="name" >
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzJustify="center">
      <nz-form-label nzSpan=4>上级分类</nz-form-label>
      <nz-form-control nzSpan=20>
        <nz-select formControlName="parentId">
          <nz-option [nzValue]="0" nzLabel="无上级分类"></nz-option>
          <nz-option *ngFor="let upLevel of upLevelCateOption" [nzLabel]="upLevel.label" [nzValue]="upLevel.value">
          </nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzJustify="center">
      <nz-form-label nzSpan=4>数量单位</nz-form-label>
      <nz-form-control nzSpan=20>
        <input nz-input formControlName="productUnit">
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzJustify="center">
      <nz-form-label nzSpan=4 nzErrorTip="排序只能为数字">排序</nz-form-label>
      <nz-form-control nzSpan=20 nzHasFeedback>
        <input nz-input formControlName="sort">
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzJustify="center">
      <nz-form-label nzSpan=4>是否显示</nz-form-label>
      <nz-form-control nzSpan=20>
        <nz-radio-group formControlName="showStatus">
          <label nz-radio [nzValue]="1">是</label>
          <label nz-radio [nzValue]="0">否</label>
        </nz-radio-group>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzJustify="center">
      <nz-form-label nzSpan=4>是否显示在导航栏</nz-form-label>
      <nz-form-control nzSpan=20>
        <nz-radio-group formControlName="navStatus">
          <label nz-radio [nzValue]="1">是</label>
          <label nz-radio [nzValue]="0">否</label>
        </nz-radio-group>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzJustify="center">
      <nz-form-label nzSpan=4>分类图标</nz-form-label>
      <nz-form-control nzSpan=20>
        <nz-upload [nzAction]="fileUploadURL" nzListType="picture" [(nzFileList)]="cateLogoFileUploader.fileList" [nzSize]="10000"
          [nzRemove]="cateLogoFileUploader.removeFile" (nzChange)="handlelogoFileChange($event)"
          [nzShowButton]="cateLogoFileUploader.fileList.length < 1 && name.valid" [nzData]="getLogoExtraData">
          <button nz-button nzType="primary" type="button"><i nz-icon nzType="upload"></i>点击上传</button>
          <div>只能上传jpg/png文件，且不超过10MB</div>
        </nz-upload>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzJustify="center">
      <nz-form-label nzSpan=4>筛选属性</nz-form-label>
      <nz-form-control nzSpan=20 >
        <div nz-row *ngFor="let control of filterAttribute" class="filter-input">
          <nz-cascader [nzOptions]="filterOptions" [formControlName]="control.controlName" style="width: 60%;"></nz-cascader>
          <i nz-icon nzType="minus-circle-o" class="dynamic-delete-button" (click)="removeField(control, $event)"></i>
        </div>
        <div nz-row *ngIf="filterAttribute.length < 3">
          <button nz-button nzType="dashed" class="add-button" (click)="addField($event)">
            <i nz-icon nzType="plus"></i>
            Add field
          </button>
        </div>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzJustify="center">
      <nz-form-label nzSpan=4>关键字</nz-form-label>
      <nz-form-control nzSpan=20>
        <input nz-input formControlName="keywords">
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzJustify="center">
      <nz-form-label nzSpan=4>分类描述</nz-form-label>
      <nz-form-control nzSpan=20>
        <textarea nz-input formControlName="description"></textarea>
      </nz-form-control>
    </nz-form-item>
    <button nz-button nzType="primary" type="submit">提交</button>
    <button nz-button *ngIf="!category?.id" type="button" (click)="handleReset()">重置</button>
  </form>
</div>
